<template>
  <audio ref="bgMusic" loop style="display: none;">
    <source src="../public/blending_love.mp4" type="audio/mpeg">
  </audio>
  <div class="music-control" @click="toggleMusic">
    <div class="music-icon">{{ isMusicPlaying ? '🎵' : '🔇' }}</div>
  </div>
  <div class="center-image">
    <img src="/lxx.jpg" alt="福气满满" class="main-image" @click="handleImageClick" :style="{ transform: `rotate(${rotateDeg}deg)` }" />
  </div>
  <div class="heart-rain"></div>
  <div class="cupid-img-area">
    <div class="cupid-img" @click="shootArrow">
      <div class="cupid-body">💘</div>
    </div>
    <div v-for="arrow in arrows" :key="arrow.id" class="cupid-arrow-anim" :style="arrow.style">
      <div class="cupid-arrow-img">→</div>
    </div>
  </div>
  <div class="center-heart">
    <div class="big-heart" :class="{ 'heart-hit': hasHitArrow }">
      <div class="container">
        <router-link class="nav-btn" to="/yiyan">每日一言</router-link>
        <router-link class="nav-btn" to="/yixiao">每日一笑</router-link>
        <router-link class="nav-btn" to="/xhy">每日歇后语</router-link>
        <router-link class="nav-btn" to="/yigu">每日故事</router-link>
      </div>
      <div v-if="hasHitArrow" class="heart-burst">
        <span v-for="n in 16" :key="n" :class="'burst-heart burst-heart-' + n"></span>
        <div class="impact-ring"></div>
        <div class="sparkles">
          <span v-for="n in 8" :key="'sparkle-' + n" :class="'sparkle sparkle-' + n">✨</span>
        </div>
      </div>
    </div>
  </div>
  <router-view />
</template>

<script setup>
import { onMounted, ref, nextTick, computed, onBeforeUnmount } from 'vue'

const bgMusic = ref(null)
const isMusicPlaying = ref(false)

function createHeart() {
  const heart = document.createElement('div')
  heart.className = 'heart'
  heart.style.left = Math.random() * 100 + 'vw'
  heart.style.animationDuration = 2 + Math.random() * 3 + 's'
  heart.style.opacity = 0.6 + Math.random() * 0.4
  heart.style.fontSize = 16 + Math.random() * 32 + 'px'
  document.querySelector('.heart-rain').appendChild(heart)
  setTimeout(() => heart.remove(), 5000)
}

function startMusic() {
  if (bgMusic.value && !isMusicPlaying.value) {
    bgMusic.value.play().then(() => {
      isMusicPlaying.value = true
      console.log('背景音乐开始播放')
    }).catch(error => {
      console.log('音乐播放失败:', error)
    })
  }
}

function toggleMusic() {
  if (bgMusic.value) {
    if (isMusicPlaying.value) {
      bgMusic.value.pause()
      isMusicPlaying.value = false
      console.log('背景音乐暂停')
    } else {
      bgMusic.value.play().then(() => {
        isMusicPlaying.value = true
        console.log('背景音乐开始播放')
      }).catch(error => {
        console.log('音乐播放失败:', error)
      })
    }
  }
}

function handleClick(event) {
  // 如果点击的是音乐控制按钮，不触发自动播放
  if (event.target.closest('.music-control')) {
    return
  }
  startMusic()
}

function handleImageClick() {
  // 图片点击效果
  console.log('图片被点击了！')
}

const rotateDeg = ref(0)
let rotateTimer = null

onMounted(() => {
  setInterval(createHeart, 300)
  // 自动旋转图片
  rotateTimer = setInterval(() => {
    rotateDeg.value += 360
  }, 5000)
  
  // 添加全局点击事件监听
  document.addEventListener('click', handleClick)
  
  // 组件卸载时移除事件监听
  return () => {
    document.removeEventListener('click', handleClick)
    if (rotateTimer) clearInterval(rotateTimer)
  }
})

const arrows = ref([])
let arrowId = 0

const hasHitArrow = computed(() => {
  const hit = arrows.value.some(arrow => arrow && arrow.hit === true)
  console.log('hasHitArrow:', hit, arrows.value)
  return hit
})

function shootArrow() {
  nextTick(() => {
    // 获取丘比特和大爱心中心坐标
    const cupid = document.querySelector('.cupid-img-area')
    const heart = document.querySelector('.center-heart')
    if (!cupid || !heart) return
    const cupidRect = cupid.getBoundingClientRect()
    const heartRect = heart.getBoundingClientRect()
    // 丘比特中心
    const startX = cupidRect.left + cupidRect.width / 2
    const startY = cupidRect.top + cupidRect.height / 2
    // 大爱心中心
    const endX = heartRect.left + heartRect.width / 2
    const endY = heartRect.top + heartRect.height / 2
    // 箭的角度
    const dx = endX - startX
    const dy = endY - startY
    const angle = Math.atan2(dy, dx) * 180 / Math.PI
    // 动画起点
    const style = {
      left: startX + 'px',
      top: startY + 'px',
      transform: `rotate(${angle}deg)`
    }
    const id = ++arrowId
    arrows.value.push({ id, style, hit: false })
    // 动画：让箭飞到终点
    setTimeout(() => {
      const arrow = arrows.value.find(a => a.id === id)
      if (arrow) {
        arrow.style.left = endX + 'px'
        arrow.style.top = endY + 'px'
        arrow.style.transform = `rotate(${angle}deg)`
      }
    }, 10)
    // 命中动画
    setTimeout(() => {
      const arrow = arrows.value.find(a => a.id === id)
      if (arrow) {
        arrow.hit = true
        console.log('Arrow hit!', arrow.id, arrow.hit)
        // 延迟移除箭，让动画有时间播放
        setTimeout(() => {
          arrows.value = arrows.value.filter(a => a.id !== id)
        }, 1000)
      }
    }, 1200)
  })
}
</script>

<style>
body {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #ffe0ec 0%, #f9c6f9 50%, #b8c6ff 100%);
  background-attachment: fixed;
  font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Arial', sans-serif;
}

.music-control {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 182, 185, 0.3);
  transition: all 0.3s ease;
}

.music-control:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  border-color: rgba(255, 182, 185, 0.5);
}

.music-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.center-image {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  text-align: center;
}
.main-image {
  width: 128px;
  background-size: cover;
  border-radius: 200px;
  box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72);
  border: 3px solid #00a0ff;
  opacity: 1;
  margin: 0 auto;
  /* margin-top: 20px; */
  margin-bottom: 20px;
  transition: all 1s, transform 1s cubic-bezier(0.4, 0.2, 0.2, 1);
  cursor: pointer;
  /* 新增：防止hover和自动旋转冲突 */
  will-change: transform;
}

.main-image:hover {
  box-shadow: 0 0 10px #fff;
  -webkit-box-shadow: 0 0 19px #fff;
  transform: rotate(360deg);
  -ms-transform: rotate(360deg); /* IE 9 */
  -moz-transform: rotate(360deg); /* Firefox */
  -webkit-transform: rotate(360deg); /* Safari 和 Chrome */
  -o-transform: rotate(360deg); /* Opera */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.heart-rain {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}
.heart {
  position: absolute;
  top: -40px;
  color: #ff6f91;
  animation: heart-fall linear forwards;
  filter: drop-shadow(0 2px 8px #ffb6b9);
  will-change: transform, opacity;
}
.heart::before {
  content: '♥';
}
@keyframes heart-fall {
  to {
    transform: translateY(110vh) rotate(30deg) scale(1.1);
    opacity: 0.7;
  }
}
.cupid-img-area {
  position: fixed;
  left: 16px;
  top: 16px;
  width: 120px;
  height: 120px;
  z-index: 20;
  pointer-events: none;
}
.cupid-img {
  width: 100px;
  height: 100px;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.3s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cupid-body {
  font-size: 60px;
  filter: drop-shadow(0 4px 8px rgba(255,182,185,0.3));
}
.cupid-img.shooting {
  animation: cupid-fly 1.2s linear;
}
@keyframes cupid-fly {
  0% { transform: scale(1) rotate(-10deg); }
  20% { transform: scale(1.05) rotate(-5deg) translateY(-4px); }
  40% { transform: scale(1.1) rotate(-10deg) translateY(-8px); }
  100% { transform: scale(1) rotate(-10deg) translateY(0); }
}
.cupid-arrow-anim {
  position: fixed;
  width: 100px;
  height: 20px;
  background: none;
  z-index: 21;
  transition: left 1.2s cubic-bezier(.7,1.8,.5,1.1), top 1.2s cubic-bezier(.7,1.8,.5,1.1);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.cupid-arrow-img {
  width: 100px;
  height: 20px;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 4px #ffb6b9);
  font-size: 40px;
  color: #ff6f91;
  display: flex;
  align-items: center;
  justify-content: center;
}
.heart-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
}
.burst-heart {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  color: #ff6f91;
  opacity: 0.8;
  font-size: 16px;
  transform: scale(0);
  animation: burst-heart-anim 0.7s cubic-bezier(.7,1.8,.5,1.1) forwards;
}
.burst-heart::before {
  content: '♥';
  font-size: 16px;
}
/* 16个心的不同方向 */
.burst-heart-1 { animation-delay: 0.02s; --tx: -40px; --ty: -40px; }
.burst-heart-2 { animation-delay: 0.04s; --tx: 0px; --ty: -50px; }
.burst-heart-3 { animation-delay: 0.06s; --tx: 40px; --ty: -40px; }
.burst-heart-4 { animation-delay: 0.08s; --tx: 50px; --ty: 0px; }
.burst-heart-5 { animation-delay: 0.10s; --tx: 40px; --ty: 40px; }
.burst-heart-6 { animation-delay: 0.12s; --tx: 0px; --ty: 50px; }
.burst-heart-7 { animation-delay: 0.14s; --tx: -40px; --ty: 40px; }
.burst-heart-8 { animation-delay: 0.16s; --tx: -50px; --ty: 0px; }
.burst-heart-9 { animation-delay: 0.18s; --tx: -30px; --ty: -60px; }
.burst-heart-10 { animation-delay: 0.20s; --tx: 30px; --ty: -60px; }
.burst-heart-11 { animation-delay: 0.22s; --tx: 60px; --ty: -30px; }
.burst-heart-12 { animation-delay: 0.24s; --tx: 60px; --ty: 30px; }
.burst-heart-13 { animation-delay: 0.26s; --tx: 30px; --ty: 60px; }
.burst-heart-14 { animation-delay: 0.28s; --tx: -30px; --ty: 60px; }
.burst-heart-15 { animation-delay: 0.30s; --tx: -60px; --ty: 30px; }
.burst-heart-16 { animation-delay: 0.32s; --tx: -60px; --ty: -30px; }
@keyframes burst-heart-anim {
  0% { opacity: 0.8; transform: scale(0) translate(0,0); }
  60% { opacity: 1; transform: scale(1.2) translate(var(--tx,0), var(--ty,0)); }
  100% { opacity: 0; transform: scale(1.1) translate(var(--tx,0), var(--ty,0)); }
}

.impact-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border: 3px solid #ff6f91;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: impact-ring-anim 0.8s ease-out forwards;
  opacity: 0.8;
}

@keyframes impact-ring-anim {
  0% { 
    width: 0; 
    height: 0; 
    opacity: 0.8; 
    border-width: 3px;
  }
  50% { 
    width: 80px; 
    height: 80px; 
    opacity: 0.6; 
    border-width: 2px;
  }
  100% { 
    width: 120px; 
    height: 120px; 
    opacity: 0; 
    border-width: 1px;
  }
}

.sparkles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 20px;
  color: #ffd700;
  opacity: 0;
  animation: sparkle-anim 1s ease-out forwards;
  filter: drop-shadow(0 0 4px #ffd700);
}

.sparkle-1 { animation-delay: 0.1s; --tx: -30px; --ty: -30px; }
.sparkle-2 { animation-delay: 0.15s; --tx: 30px; --ty: -30px; }
.sparkle-3 { animation-delay: 0.2s; --tx: 30px; --ty: 30px; }
.sparkle-4 { animation-delay: 0.25s; --tx: -30px; --ty: 30px; }
.sparkle-5 { animation-delay: 0.3s; --tx: 0px; --ty: -40px; }
.sparkle-6 { animation-delay: 0.35s; --tx: 40px; --ty: 0px; }
.sparkle-7 { animation-delay: 0.4s; --tx: 0px; --ty: 40px; }
.sparkle-8 { animation-delay: 0.45s; --tx: -40px; --ty: 0px; }

@keyframes sparkle-anim {
  0% { 
    opacity: 0; 
    transform: scale(0) translate(0,0) rotate(0deg); 
  }
  20% { 
    opacity: 1; 
    transform: scale(1.2) translate(var(--tx,0), var(--ty,0)) rotate(180deg); 
  }
  60% { 
    opacity: 0.8; 
    transform: scale(1) translate(var(--tx,0), var(--ty,0)) rotate(360deg); 
  }
  100% { 
    opacity: 0; 
    transform: scale(0.8) translate(var(--tx,0), var(--ty,0)) rotate(720deg); 
  }
}
.center-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  z-index: 2;
  position: relative;
}
.big-heart {
  position: relative;
  width: 420px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}
.big-heart::before,
.big-heart::after {
  content: '';
  position: absolute;
  top: 0;
  width: 220px;
  height: 340px;
  background: linear-gradient(135deg, #ffb6b9 0%, #fcdffb 100%);
  border-radius: 220px 220px 0 0;
  transform: rotate(-45deg);
  left: 100px;
  box-shadow: 0 8px 32px 0 rgba(255,182,185,0.18);
}
.big-heart::after {
  left: auto;
  right: 100px;
  transform: rotate(45deg);
}

.big-heart.heart-hit {
  animation: heart-shake 0.6s ease-in-out;
}

@keyframes heart-shake {
  0%, 100% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(1.05) rotate(-2deg); }
  20% { transform: scale(1.05) rotate(2deg); }
  30% { transform: scale(1.05) rotate(-1deg); }
  40% { transform: scale(1.05) rotate(1deg); }
  50% { transform: scale(1.03) rotate(-0.5deg); }
  60% { transform: scale(1.03) rotate(0.5deg); }
  70% { transform: scale(1.01) rotate(-0.2deg); }
  80% { transform: scale(1.01) rotate(0.2deg); }
  90% { transform: scale(1) rotate(0deg); }
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  z-index: 2;
}
.nav-btn {
  display: block;
  width: 200px;
  margin: 20px 0;
  padding: 16px 0;
  text-align: center;
  font-size: 1.2rem;
  background: linear-gradient(90deg, #ffb6b9 0%, #fcdffb 100%);
  color: #fff;
  border-radius: 24px;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(255,182,185,0.12);
  letter-spacing: 2px;
  font-weight: bold;
  border: none;
}
.nav-btn:hover {
  background: linear-gradient(90deg, #fcdffb 0%, #ffb6b9 100%);
  color: #d72660;
  box-shadow: 0 4px 24px rgba(255,182,185,0.22);
}
@media (max-width: 600px) {
  .center-heart {
    min-height: 50vh;
  }
  .big-heart {
    width: 90vw;
    height: 48vw;
    min-width: 220px;
    min-height: 180px;
  }
  .big-heart::before,
  .big-heart::after {
    width: 44vw;
    height: 38vw;
    left: 23vw;
    top: 0;
    min-width: 110px;
    min-height: 95px;
  }
  .big-heart::after {
    left: auto;
    right: 23vw;
  }
  .container {
    min-width: 110px;
    top: 52%;
  }
  .nav-btn {
    width: 90vw;
    min-width: 110px;
    font-size: 1.05rem;
    margin: 12px 0;
    padding: 12px 0;
  }
  .cupid-img-area {
    width: 70px;
    height: 70px;
    left: 6px;
    top: 6px;
  }
  .cupid-img {
    width: 60px;
    height: 60px;
  }
  .cupid-body {
    font-size: 40px;
  }
  
  .main-image {
    width: 100px;
    border-radius: 150px;
  }
}
</style>
